<style lang="scss">
.grid-view {
  font-size: 14px;
  &__col {
    border: 1px solid #eeeeee;
    padding: 10px;
  }
  .detail-kv__row {
    height: var(--detail-kv__row-height, 28px);
  }
  .detail-kv__label {
    text-align: right;
    width: var(--detail-kv__label-width, 120px);

    color: var(--el-color-info);
  }
  .detail-kv__value {
    padding-left: var(--detail-kv__label-padding-left, 10px);
  }
}
</style>


<script>
import {renderKeyValues} from "@example/views/datatable/mixins";
// import {CurdHelper} from "../../../../static/ext";
import {CurdHelper} from "@/main";

export default {
  name: "GridView",
  mixins: [
    CurdHelper.CurdViewMixin
  ],
  props: {
    rowNum: {
      type: Number,
      default: 2
    },
    totalNum: {
      type: Number,
      default: 24
    },
    gutter: {
      type: [Number],
      default: 10
    },
  },
  methods: {
    renderColumn(h, row, index) {
      return renderKeyValues(h, row, this.columns, index, {}, {
        handleContent() {

        }
      })
    },
    renderRows(h, table) {
      let span = this.totalNum / this.rowNum;
      let _columns = table.map((column, columnIndex) => {
        let _column = this.renderColumn(h, column, columnIndex)
        let onDetail = this.onDetail(column, columnIndex)
        let onEdit = this.onEdit(column, columnIndex)
        let onDelete = this.onDelete(column, columnIndex)
        return (<zw-col  class="grid-view__col"  span={span}>
          {_column}
          <zw-layout row>
            <zw-layout expand>&nbsp;</zw-layout>
            <el-button size="small" onClick={onDetail}>详情</el-button>
            <el-button size="small" onClick={onEdit}>编辑</el-button>
            <el-button size="small" type="danger" onClick={onDelete}>删除</el-button>
          </zw-layout>
        </zw-col>)
      })
      return _columns
    },
    onDetail(column, columnIndex) {
      let self = this
      return function () {
        // console.log(column, columnIndex)
        self.actions.table__detail(column, {}, columnIndex)
      }
    },
    onEdit(column, columnIndex) {
      let self = this
      return function () {
        // console.log(column, columnIndex)
        self.actions.table__edit(column, {}, columnIndex)
      }
    },
    onDelete(column, columnIndex) {
      let self = this
      return function () {
        // console.log(column, columnIndex)
        self.actions.table__delete(column, {}, columnIndex)
      }
    }
  },

  render(createElement, context) {
    let rows = this.renderRows(createElement, this.data)
    return (
<div class="grid-view">
  <zw-row className="grid-view__row" gutter={this.gutter}>{rows}</zw-row>
</div>
    )
  }
}
</script>

